@use "@styles/mixins/bem" as *;
@use "@styles/mixins/namespace" as *;

@include b(point-flicker) {
  position: relative;
  width: var(--point-width);
  height: var(--point-height);
  background: var(--point-background);
  border-radius: var(--point-border-radius);

  &::after {
    background: var(--point-background);
  }

  &::before,
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: var(--point-border-radius);
    animation: flicker 1.2s ease-out infinite;
  }

  @keyframes flicker {
    0% {
      opacity: 1;
      transform: scale(0.5);
    }

    30% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: scale(var(--point-scale));
    }
  }
}
